<template>
    <div class='wrap'>
        <div class="pt20 pb20 pr30 pl20 radius10 login-div">
            <div class="fs24 color_fff flex aic jcc title">
                {{ projectName }}
            </div>
            <el-form :model="form" :rules="rules" ref="formRef" class="mt20">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="form.account" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" />
                </el-form-item>
                <el-form-item label="角色" prop="roleCode">
                    <el-radio-group v-model="form.roleCode">
                        <el-radio value="sysadmin" class="color_fff">管理员</el-radio>
                        <el-radio value="教师">教师</el-radio>
                        <el-radio value="学生">学生</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 500%; margin: 0 auto" type="primary" @click="submitForm">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, inject, defineAsyncComponent } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import { projectName, roleList } from '/public/config/config'
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const request = inject('request')
const form = ref({
    account: 'admin',
    password: 'admin',
    roleCode: "sysadmin",
});

const rules = {
    account: [
        { required: true, message: '请输入账号' }
    ],
    password: [
        { required: true, message: '请输入密码' }
    ],
    roleCode: [
        { required: true, message: '请选择角色' }
    ],
};

const submitForm = async () => {
    // 在这里进行接口调用
    const res = await request.post('user/login', form.value);

    if (res.code === 200) {
        localStorage.setItem('userInfo', JSON.stringify({
            ...res.data.user,
            roleCode: form.value.roleCode,
            roleName: (roleList.filter(item => item.roleCode === form.value.roleCode)[0]).roleName
        }))
        // const dynamicRoutes = res.data.menuInfo
        // // / 把 JSON 数据转换为路由配置
        // const formatRoute = (routes) => {
        //     return routes.map(route => {

        //         if (route.component) { // 如果组件名称存在
        //             if (route.parentName) {
        //                 route.component = defineAsyncComponent(() => import('../pages/' + route.parentName + '/' + route.path))
        //             } else {
        //                 route.component = () => import('../pages/' + route.path)
        //             }

        //         }
        //         if (route.children) { // 如果有子路由
        //             delete (route.component)
        //             route.children = formatRoute(route.children) // 递归处理子路由
        //         }
        //         return route
        //     })
        // }
        // // 格式化路由
        // let formattedRoutes = formatRoute(dynamicRoutes)
        // formattedRoutes.forEach(route => {
        //     router.addRoute(route)
        // })
        // localStorage.setItem('menuInfo', JSON.stringify(res.data.menuInfo))
        // localStorage.setItem('dynamicRoutes', JSON.stringify(res.data.menuInfo))

        // 登录成功后的逻辑
        router.push('/')
    }
};
</script>

<style scoped lang="scss">
.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-image: url('../../public/img/loginBg.jpg');
    background-size: 100% 100%;

    .login-div {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .title {
        font-weight: 700;
    }
}
</style>

<style lang="scss">
.login-div {
    .el-radio__input.is-checked+.el-radio__label {
        color: orangered;
    }

    .el-radio__input.is-checked .el-radio__inner {
        background: orangered;
        border-color: orangered;
    }

    .el-form-item__label {
        color: #fff;
    }
}
</style>